<template>
	<view class="center">
		<u-navbar title="商品列表"></u-navbar>
		<view class="content">
			<view class="headersearch">
				<view class="search-wrapper">
					<view class="input-wrapper">
						<input class="input" type="text" @confirm="onSearch" v-model="value" placeholder="请输入产品名称" />
						<u-icon class="iconfont " name="search"></u-icon>
					</view>
					<view class="button" @click="onSearch">搜索</view>
				</view>
			</view>

			<view class="tabs-wrapper">
				<view class="tabs-titel" :style="Selectcolo ? 'color: #222222;' : 'color: #F53942;'" @click="onTab('')">综合排序</view>
				<view class="sales" :style="filterQuantity ? 'color: #222222;' : 'color: #F53942;'" @click="onTab('quantity')">
					销量
					<view class="tabs-icon">
						<u-icon name="arrow-up-fill" :style="filterQuantityTop ? 'color: #888888;' : 'color: #F53942;'"></u-icon>
						<u-icon name="arrow-down-fill" :style="filterQuantitydown ? 'color: #888888;' : 'color: #F53942;'"></u-icon>
					</view>
				</view>

				<view class="price" :style="filterPrice ? 'color: #222222;' : 'color: #F53942;'" @click="onTab('price')">
					价格
					<view class="tabs-icon">
						<u-icon name="arrow-up-fill" :style="filterPriceTop ? 'color: #888888;' : 'color: #F53942;'"></u-icon>
						<u-icon name="arrow-down-fill" :style="filterPricedown ? 'color: #888888;' : 'color: #F53942;'"></u-icon>
					</view>
				</view>
			</view>

			<!-- 瀑布流商品列表 -->
			<view class="container">
				<view class="centergoods">
					<view class="goods-wrapper" v-if="(index + 1) % 2 != 0" v-for="(item, index) in goodsList" :key="index" @click="ongoods(item)">
						<image class="img" src="https://peonyoss.longchimudan.com/peony/goods/e53b3af59bcf4aca9702df88ea105f46.jpg"></image>
						<view class="goods-item">
							<view class="title">
								悄红颜紧致提拉精华液悄红颜紧致提拉精华液悄红颜紧致提拉精华液悄红颜紧致提拉精华液悄红颜紧致提拉精华液悄红颜紧致提拉精华液悄红颜紧致提拉精华液
							</view>
							<view class="item">
								<view class="Price">￥15.00</view>
								<view class="Sold">已售 56324</view>
							</view>
						</view>
					</view>
				</view>
				<view class="centergoods">
					<view class="goods-wrapper" v-if="(index + 1) % 2 == 0" v-for="(item, index) in goodsList" :key="index" @click="ongoods(item)">
						<image class="img" src="https://peonyoss.longchimudan.com/peony/goods/e53b3af59bcf4aca9702df88ea105f46.jpg"></image>
						<view class="goods-item">
							<view class="title">
								悄红颜紧致提拉精华液悄红颜紧致提拉精华液悄红颜紧致提拉精华液悄红颜紧致提拉精华液悄红颜紧致提拉精华液悄红颜紧致提拉精华液悄红颜紧致提拉精华液
							</view>
							<view class="item">
								<view class="Price">￥15.00</view>
								<view class="Sold">已售 56324</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			value: '', //输入框内容
			searchForm: {
				name: '', //搜索框内容
				orderBy: 'quantity', //排序类型 综合：默认值空, 价格：price, 销量：quantity
				sortType: 'desc', //排序方式：倒序：desc 正序：asc
				catalogThreeName: '' //三级分类
			},
			Selectcolo: true, //综合排名的选项样式
			filterQuantity: true, //销量的选中样式
			filterPrice: true, //价格的选中样式
			filterQuantityTop: true, //销量向上的选中样式
			filterPriceTop: true, //价格向上的选中样式
			filterQuantitydown: true, //销量向下的选中样式
			filterPricedown: true, //价格向下的选中样式
			goodsList: [{ id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }, { id: '5' }]
		};
	},

	computed: {
		...mapGetters(['imgBaseUrl'])
	},
	methods: {
		//点击
		ongoods(item) {
			uni.navigateTo({
				url: '../../pages/goods-detail/index'
			});
			console.log(item, '点击了商品，这里要跳转详情页');
		},
		//搜索
		onSearch() {
			console.log(this.value, '搜索的值');
		},
		onTab(index) {
			//
			if (index === '') {
				this.Selectcolo = !this.Selectcolo;
				this.filterQuantity = true;
				this.filterPrice = true;
				this.filterQuantityTop = true;
				this.filterQuantitydown = true;
				this.filterPricedown = true;
				this.filterPriceTop = true;
				if(this.searchForm.sortType === 'desc'){
					this.searchForm.sortType = 'asc';
				}else{
					this.searchForm.sortType === 'desc'
				}
				
			} else if (index === 'quantity') {
				this.Selectcolo = true;
				this.filterPrice = true;
				this.filterQuantity = false;
				if (this.searchForm.sortType === 'desc') {
					this.searchForm.sortType = 'asc';
					this.filterQuantityTop = false;
					this.filterQuantitydown = true;
					this.filterPricedown = true;
					this.filterPriceTop = true;
				} else {
					this.searchForm.sortType = 'desc';
					this.filterQuantityTop = true;
					this.filterQuantitydown = false;
					this.filterPricedown = true;
					this.filterPriceTop = true;
				}
			} else {
				this.Selectcolo = true;
				this.filterPrice = false;
				this.filterQuantity = true;
				if (this.searchForm.sortType === 'desc') {
					this.searchForm.sortType = 'asc';
					this.filterQuantityTop = true;
					this.filterQuantitydown = true;
					this.filterPricedown = true;
					this.filterPriceTop = false;
				} else {
					this.searchForm.sortType = 'desc';
					this.filterQuantityTop = true;
					this.filterQuantitydown = true;
					this.filterPriceTop = true;
					this.filterPricedown = false;
				}
			}
			console.log(index, '选中的啥');
			console.log(this.searchForm,'发送请求的参数啊')
		}
	}
};
</script>
<style lang="scss">
@import '@/styles/mixin.scss';
.center {
	min-height: 100%;
	background-color: #f5f5f5;
	.content {
		.headersearch {
			overflow: hidden;
			.search-wrapper {
				display: flex;
				align-items: stretch;
				padding-top: 20rpx;
				margin: 20rpx;
			}
			.input-wrapper {
				position: relative;
				flex: 1;
				.input {
					width: 100%;
					background-color: #ffffff;
					opacity: 0.8;
					height: 70rpx;
					border-radius: 60rpx 0 0 60rpx;
					padding-left: 60rpx;
				}
				.iconfont {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 20rpx;
				}
			}
			.button {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 50rpx;
				background-color: #cccccc;
				border-radius: 0 60rpx 60rpx 0;
				color: #ffffff;
				opacity: 0.8;
			}
		}
		.tabs-wrapper {
			padding: 20rpx;
			align-items: baseline;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			font-size: 26rpx;
			font-weight: 400;
			color: #222222;
			.sales {
				display: flex;
				.tabs-icon {
					color: #888888;
					padding-left: 20rpx;
					display: flex;
					flex-direction: column;
				}
			}
			.price {
				display: flex;
				.tabs-icon {
					padding-left: 20rpx;
					display: flex;
					flex-direction: column;
				}
			}
		}
	}
	.container {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		background-color: #f5f5f5;
		z-index: 6;
		margin-top: 20rpx;

		.centergoods {
			padding: 5rpx 8rpx 0 8rpx;
			background-color: #f5f5f5;
			width: 50%;
			box-sizing: border-box;
			border-radius: 30rpx;
			.goods-wrapper {
				margin-top: 15rpx;
				padding: 0 0 25rpx 0;
				background-color: #ffffff;
				align-items: center;
				border-radius: 30rpx;
				overflow: hidden;
				width: 100%;
				.img {
					width: 340rpx;
					height: 340rpx;
				}
				.goods-item {
					background-color: #ffffff;
					margin: 20rpx;
					.title {
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
						font-size: 26rpx;
						color: #222222;
						font-weight: 400;
					}
					.item {
						margin: 10rpx;
						display: flex;
						justify-content: space-between;
						align-items: baseline;
						width: 100%;
						height: 55rpx;
						.Price {
							font-size: 32rpx;
							font-weight: bold;
							color: #f53942;
						}
						.Sold {
							font-size: 20rpx;
							font-weight: 500;
							color: #888888;
						}
					}
					//
				}
			}
		}
	}
}
</style>
